<template lang="">
	<div class="row">
		<div id="stackdLine" style="height: 270px; width: 100%"></div>
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const el = ref();
var date = [
	"2023-1",
	"2023-2",
	"2023-3",
	"2023-4",
	"2023-5",
	"2023-6",
	"2023-7",
	"2023-8",
	"2023-9",
	"2023-10",
	"2023-11",
	"2023-12",
];

onMounted(() => {
	el.value; // <div>
	//需要获取到element,所以是onMounted的Hook
	let myChart = echarts.init(document.getElementById("stackdLine"));
	// 绘制图表
	myChart.setOption({
		title: {
			text: '采购金额',
			textStyle: {
				fontSize: 13, //字体大小
			},
		},
		tooltip: {
			trigger: "axis",
		},
		legend: {
			data: [
				"卫生材料",
				"通用设备",
				"专用设备",
				"其他材料",
				"专用低值易耗",
			],
			itemHeight: 5
		},
		grid: {
			left: "5%",
			right: "8%",
			bottom: "2%",
			top: "35%",
			containLabel: true,
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: date,
			axisTick: true,
			axisLine: {
				show: true,
			},
		},
		yAxis: {
			min: 0,
			type: "value",
			axisTick: true,
			axisLine: {
				show: true,
				interval: 0,
				textStyle: {
					fontSize: "1"
				}
			},
			splitLine: {
				show: false,
			},
		},
		series: [
			{
				name: "卫生材料",
				type: "line",
				stack: "Total",
				data: [
					324, 163, 232, 816, 343, 328, 234, 338, 453, 178, 342, 312
				],
			},
			{
				name: "通用设备",
				type: "line",
				stack: "Total",
				data: [
					220, 132, 191, 235, 260, 550, 360, 182, 889, 147, 178, 330,
				],
			},
			{
				name: "专用设备",
				type: "line",
				stack: "Total",
				data: [
					150, 232, 201, 104, 102, 101, 104, 900, 230, 210, 190, 330,
				],
			},
			{
				name: "其他材料",
				type: "line",
				stack: "Total",
				data: [
					320, 332, 301, 132, 101, 134, 90, 230, 210, 334, 390, 330,
				],
			},
			{
				name: "专用低值易耗",
				type: "line",
				stack: "Total",
				data: [
					120, 232, 301, 432, 401, 514, 623, 730, 810, 934, 390, 330,
				],
			},
		],
	});
});
</script>
<style>
#stackdLine {
	margin: 0;
	padding: 0;
}

.flex {
	display: flex;
}

.col {
	flex-direction: column;
}

bady {
	margin: 0;
}

.list_title1 {
	/* background-color: #383d53; */
	color: #fff;
	padding: 8px 2px;
	border-radius: 4px;
	/* // border-left: 5px solid var(--el-color-primary-light-5); */
	height: 20px;
	line-height: 20px;
	margin-top: 10px;
}

#stackdLine {
	/* background-color: #2f3243; */
	padding: 8px 2px;
	border-radius: 6px;
	/* // border-left: 5px solid var(--el-color-primary); */
	height: 170px;
	line-height: 10px;
}

.title_data {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 130px;
}

.table-name {
	font-size: 25px;
	color: rgb(236, 240, 245);
}

.left_data {
	font-size: 5px;
	color: #ffffffba;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-top: 20px;
	height: 100px;
	/* // line-height: 100px; */
	/* // background-color: #ffffff45; */
	width: 250px;
}

.right_data {
	font-size: 5px;
	color: #ffffffba;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-top: 20px;
	height: 100px;
	/* // line-height: 100px; */
	/* // background-color: #ffffff45; */
	width: 250px;
}

.numberdata {
	background-image: linear-gradient(to top, #5699e661, #69a8e6);
	margin-left: 5px;
	border-radius: 5px;
}
</style>
